<template>
  <div class="component-tabs">
    <div
      @click="menuClick(menu.name, index)"
      v-for="(menu, index) in listMenu"
      :key="index"
      class="component-tabs-item"
      :class="{ mactive: index === activeIndex ? true : false }"
    >
      <span>{{ menu.name }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "TabsSide",
  props: {
    listMenu: {
      type: Array,
      default: () => {
        return [];
      },
    },
    activeIndex: {
      type: Number,
      default: () => {
        return 0;
      },
    },
  },
  setup(props, context) {
    const listMenu: any = props.listMenu;
    function menuClick(menuName: any, index: number) {
      // 通过自定义事件回传值
      context.emit("menuClick", menuName, index);
    }
    return {
      listMenu,
      menuClick,
    };
  },
});
</script>

<style lang="less">
.component-tabs {
  width: 654px;
  height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  .component-tabs-item {
    width: 176px;
    height: 68px;
    // padding: 22px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mactive {
    background: #ed9e4b;
    border-radius: 56px;
    color: white;
  }
}
</style>